<template>
	<div class="newablumMusic">
			<div class="title">
				<span @click="newablum" :class="{'active':isShow}">新碟</span>
				<span @click="newablum" :class="{'active':!isShow}" >新歌</span>
			</div>
			<div v-show="isShow">
				<new-ablum></new-ablum>
			
			</div>
			<div class="back"  v-show="!isShow">
				<newmusic></newmusic>
				
			</div>
				
	</div>
</template>

<script>
	import newAblum from './child/newAblum.vue';
	import newmusic from './child/newmusic.vue';
	
	export default{
		name:"de",
		components:{
			newAblum,newmusic
		},
		data(){
			return{
				isShow:true
			}
		},
		methods:{
			newablum(){
				this.isShow= !this.isShow;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	
	.newablumMusic{
		background:#fff;
		padding:vw(16)  0 ;
		.title{
			padding: 0 vw(16);
			position: relative;
			span{
				color: #999;
				margin-right: vw(14);
				
			}
			.active{
				font-weight: bold;
				color: #333;
				font-size: vw(18);
			}
			&::after{
				content: "";
				width: vw(1);
				border-radius: vw(10);
				height: vw(18);
				background-color: #ddd;
				position: absolute;
				top:4px;
				left: 58px;
			}
		}
		.back{
			i{
				font-size: vw(40);
				color: red;
			}
		}
	}
</style>